<template>
	<div class="service">
		<div class="box"  id="ywy_box">
			<h2>
				<img src="@/assets/qq.png" alt="">
				<p>QQ客服 <span style="color: #abafb3;">(在线时间：9:00-18:00)</span><br><a href="javascript:;"
						style="color: #266eff;margin-top: 3px;display: inline-block;">在线交谈</a></p>
			</h2>
			<ul>
				<li>
					<img src="@/assets/wx.png" alt="">
					<div>
						<p>商务联系<br>手机号：1354731636</p>
						<img src="@/assets/erWei1.png" alt="">
						<h4>扫一扫联系商务</h4>
					</div>
				</li>
				<li>
					<img src="@/assets/wx.png" alt="">
					<div>
						<p>商务客服</p>
						<img src="@/assets/erWei2.png" alt="">
						<h4>扫一扫联系客服</h4>
					</div>
				</li>
			</ul>
		</div>
		<div class="show" id="ywy_show">
			<img src="@/assets/kefu.png" alt="">
		</div>
	</div>
</template>

<script>
	export default {
		mounted(){
			var show = document.getElementById("ywy_show");
			var ywy_box = document.getElementById("ywy_box");
			show.addEventListener("mouseenter", () => {
				ywy_box.style.display="block";
			})
			show.addEventListener("mouseleave", () => {
				ywy_box.style.display="none";
			})
		}
	}
</script>

<style scoped>
	.service {
		position: fixed;
		/* 粘性定位 */
		top: 30%;
		right: 20px;
		width: 315px !important;
		z-index: 99999;
	}

	.service .box {
		float: left;
		width: 250px;
		background-color: #fff;
		padding: 10px;
		box-shadow: 0px 0px 11px -3px #000;
		display: none;
	}

	.service .box>h2 {
		height: 47px;
		width: 100;
		border-bottom: 1px solid #ececec;
	}

	.service .box>h2 img {
		width: 36px;
		height: 36px;
		float: left;
	}

	.service .box>h2 p {
		font-size: 12px;
		color: #2e384d;
		padding-left: 46px;
	}

	.service .box li {
		width: 100%;
		padding-top: 10px;
		overflow: hidden;
		border-bottom: 1px solid #ececec;
	}

	.service .box li div img {
		width: 138px;
		height: 138px;
		margin-top: 15px;
		margin-left: 10px;
	}

	.service .box li>img {
		float: left;
		width: 36px;
		height: 36px;
	}

	.service .box li div {
		float: left;
		width: 160px;
	}

	.service .box li div p {
		font-size: 12px;
		padding-left: 10px;
	}

	.service .box li div h4 {
		font-size: 12px;
		color: #2e384d;
		font-weight: 400;
		text-align: center;
		margin: 10px 0;
	}

	/* 鼠标经过盒子 */
	.service .show {
		float: right;
		width: 54px;
		height: 54px;
		border-radius: 5px;
		text-align: center;
		line-height: 54px;
		background-color: #fff;
		box-shadow: 0px 0px 11px -3px #000;
	}
</style>
